<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/head.css">
</head>
<body>
<div  id="huhead">
    <div class="huheadtop">
        <div>
            <div  class="huheadlef">
                <div><img :src="log"  /></div>
                <div>
                    <select>
                <option v-for="item  in  xuexiaos" >{{item}}</option>
            </select></div>
            </div>
            <div  class="huheadright">
                <div><input  placeholder="请输入关键字"   /><img  :src="sou" /> <button>搜索</button></div>
                <div>热门搜索关键词:{{guanjian}}</div>
            </div>
        </div>
    </div>
    <div class="huheadbot">
        <div>
        <div>
            <div  class="hudao"  @click="tohtml(index ,$event)"   v-for="(item ,index) in  daohang"  :index="index"   :src="item.src"  :class="index==indexs ? 'active':''" ><p>{{item.name}}</p><p>{{item.yinwen}}</p><a :href="item.src" ></a></div>
        </div>
        <div class="mu"  v-if="state==0"><a  v-on:click.stop="login" href="#">登录</a>/<a  @click="erweitrue"   href="#">注册</a></div>
        <div  class="mux"   v-else-if="state==1"><img  :src="my.src" /> <div>{{my.name}}</div></div>
    </div>
    </div>

    <div class="all"  v-show="loginstate">
        <div   class="login" >
            <div><div>登录博知堂</div><div  @click="quxiao">取消</div></div>
            <div><div>账号</div><input  type="number" placeholder="请输入手机号码" /></div>
            <div><div>密码</div><input type="password" placeholder="请输入密码" /></div>
            <div>立即登录</div>
            <div><a  v-on:click="wangji" >忘记密码?</a><a   target="_blank"   @click="erweitrue" href="#">注册</a></div>
        </div>
    </div>

    <div class="alld"  v-show="wangjistate">
        <div   class="logins" >
            <div><div>登录博知堂</div><div  @click="fanhui">返回</div></div>
            <div><div>账号</div><input  type="number" placeholder="请输入手机号码" /></div>
            <div><div>验证码</div><input  placeholder="请输入验证码" /><input value="发送验证码"  readonly="readonly" /></div>
            <div><div>密码</div><input  placeholder="请输入新密码" /></div>
            <div>重置密码</div>
        </div>
    </div>

    <div class="alldds"  v-if="zhuce">

   <div  class="login">
       <img  @click="erweifalse" class="erwei" :src="erweima" />
       <span>请在扫描二维码在小程序页面进行注册</span>
   </div>

    </div>


</div>



</body>
<script  src="js/jquery.3.3.1.min.js"></script>
<script  src="js/vue.js"></script>
<script  type="text/javascript">

    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){
                return pair[1];
            }
        }
        return(false);
    }
    var first = getQueryVariable('first');
    if(!first){
        first = 0;
    }
    new Vue({
        el:"#huhead",
        data:{
            zhuce:false,
            indexs:first,
            state:0, //判断是否登录
            loginstate:false,
            erweima:"http://bzt.cybwnt.com/uploads/zhongxue/erweima.jpg",
            wangjistate:false,
            my:{src:"http://bzt.cybwnt.com/uploads/zhongxue/webmytouxiang.png",name:"张雪"},
            log:"http://bzt.cybwnt.com/uploads/zhongxue/weblog.png",
            sou:"http://bzt.cybwnt.com/uploads/zhongxue/sousuo.png",
            xuexiaos:["成都校区","北京校区","新都校区","上海校区"],
            guanjian:"初三英语 初三数学 初三化学",
             daohang:[{name:"首页",yinwen:"MOME PAGE",src:"index.html?first=0"},
                 {name:"课程",yinwen:"COURSE",src:"huclass.html?first=1"},
                 {name:"活动",yinwen:"ACTIVITY",src:"huhuodong.html?first=2"},
                 {name:"打开宝库",yinwen:"TREASURY",src:"hubaoku.html?first=3"},
                 {name:"师资力量",yinwen:"PAMOMEGE",src:"huteacher.html?first=4"},
                 {name:"联系我们",yinwen:"CONTACT US",src:"hulianxiwomen.html?first=5"},
             ],
        },
   methods:{
     //点击返回顶部
       login:function () {
           this.loginstate=true;
       },
       quxiao:function () {
           this.loginstate=false;
       },
       wangji:function () {
           this.wangjistate=true;
       },
       fanhui:function () {
           this.wangjistate=false;
       },
       erweitrue:function () {
           this.zhuce=true
       },
       erweifalse:function () {
           this.zhuce=false
       },

   },

   })


</script>
</html>